<template>
  <div id="container">
    <div class="login-box">
      <h2>Login</h2>
      <form>
        <div class="user-box">
            <input type="text" name="" required="" v-model="user.account">
            <label>Username</label>
        </div>
        <div class="user-box">
            <input type="password" name="" required="" v-model="user.password"  @keypress.enter="open2">
            <label>Password</label>
        </div>
      </form>
      <el-row class="mb-4">
        <el-button :plain="true" :title="login" @click="open2">登录</el-button>
        <el-button type="success" @click="register">注册</el-button>
      </el-row>
    </div>
  </div>
</template>

<script setup>


import { ElMessage } from 'element-plus'
import { reactive,ref,computed } from 'vue';
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const login = ref('')

let user = reactive({
  account:undefined,
  password:undefined
})
const open2 = () => {
  const { account, password } = user  
  if(!account || !password){
    ElMessage({
      dangerouslyUseHTMLString:true,
      message: '请输入账号或密码',
      type: 'error',
      duration: 1000,
      center: true
    },()=> {console.log(1212);})
  }
  if(account == "admin" && password == '123456'){
        ElMessage({
          dangerouslyUseHTMLString:true,
          message: '登录成功',
          type: 'success',
          duration: 1000,
          center: true,
          onClose:()=> {return router.push('/home')}
      })
    }
  }
const register = ()=> {
  router.push('/register')
}


</script>


<style scoped>
.mb-4{
  display: flex;
  justify-content:space-between;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
  top: -30px;
  left: 0;
  color: #03e9f4;
  font-size: 10px;
}

</style>